<template>
    <div class="mod-config">
        <el-card
            shadow="hover"
            v-loading="loading"
            element-loading-text="定位中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)">
            <el-form :model="addressForm" label-width="0px" class="demo-ruleForm">
                <el-form-item prop="nation" label="">
                    <el-input style="font-size: 16px;" placeholder="所在国家" v-model="addressForm.nation" :disabled="disable">
                        <template slot="prepend"><i class="el-icon-discover"></i>国家:</template>
                    </el-input>
                </el-form-item>
                <div style="height: 20px"></div>
                <el-form-item prop="province" label="">
                    <el-input style="font-size: 16px;" placeholder="所在省份" v-model="addressForm.province" :disabled="disable">
                        <template slot="prepend"><i class="el-icon-discover"></i>省份:</template>
                    </el-input>
                </el-form-item>
                <div style="height: 20px"></div>
                <el-form-item prop="city" label="">
                    <el-input style="font-size: 16px;" placeholder="所在城市" v-model="addressForm.city" :disabled="disable">
                        <template slot="prepend"><i class="el-icon-discover"></i>城市:</template>
                    </el-input>
                </el-form-item>
                <div style="height: 20px"></div>
                <el-form-item prop="district" label="">
                    <el-input style="font-size: 16px;" placeholder="所在县区" v-model="addressForm.district" :disabled="disable">
                        <template slot="prepend"><i class="el-icon-discover"></i>县区:</template>
                    </el-input>
                </el-form-item>
                <div style="height: 20px"></div>
                <el-form-item prop="street" label="">
                    <el-input style="font-size: 16px;" placeholder="所在街道" v-model="addressForm.street" :disabled="disable">
                        <template slot="prepend"><i class="el-icon-discover"></i>街道:</template>
                    </el-input>
                </el-form-item>
                <div style="height: 20px"></div>
                <el-form-item prop="streetNumber" label="">
                    <el-input style="font-size: 16px;" placeholder="所在街道牌号" v-model="addressForm.streetNumber" :disabled="disable">
                        <template slot="prepend"><i class="el-icon-discover"></i>街道牌号:</template>
                    </el-input>
                </el-form-item>
            </el-form>
            <div v-if="isPosition" style="color: #02a6ff">
                <i class="el-icon-delete-location"></i>
                所在国家:{{addressDetail.nation}}&nbsp;&nbsp;&nbsp;
                所在省份:{{addressDetail.province}}&nbsp;&nbsp;&nbsp;
                所在城市:{{addressDetail.city}}&nbsp;&nbsp;&nbsp;
                所在县区:{{addressDetail.district}}&nbsp;&nbsp;&nbsp;
                所在街道:{{addressDetail.street}}&nbsp;&nbsp;&nbsp;
                所在街道牌号:{{addressDetail.streetNumber}}
            </div>
            <div style="height: 20px"></div>
            <div class="dialog-footer" style="text-align: center;">
                <el-button type="success" icon="el-icon-location" @click="getMyLocation">定 位</el-button>
                <el-button type="primary" icon="el-icon-edit-outline" @click="resetForm">重 置</el-button>
            </div>
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {
            //位置加载
            loading: false,
            //禁用
            disable:true,
            //是否定位
            isPosition: false,
            //当前定位
            position: null,
            //考勤地址详情
            addressForm: {
                nation: '',
                province: '',
                city: '',
                district: '',
                street: '',
                streetNumber: ''
            },
            //定位详情
            addressDetail: {
                nation: '',
                province: '',
                city: '',
                district: '',
                street: '',
                streetNumber: ''
            }
        }
    },
    mounted() {
        //获取当前位置
        this.getAddress();
    },
    methods: {
        // 获取当前位置
        getMyLocation() {
            if ("geolocation" in navigator) {
                navigator.geolocation.getCurrentPosition(
                    (position) => {
                        this.position = {
                            longitude: position.coords.longitude,
                            latitude: position.coords.latitude,
                        };
                        this.getDetailedAddress();
                    },
                    (error) => {
                        console.error("Error getting location:", error);
                    },
                );
            } else {
                alert("Geolocation is not supported by this browser.");
            }
        },
        //获取当前所在地
        getAddress(){
            let that = this;
            that.$http('/attendance/getPosition','POST',null,(resp)=>{
                let data = resp.data;
                let message = '暂无地址信息';
                if(data.code === 20000){
                    let address = data.data;
                    this.addressInfo(address,message);
                  }
            })
        },
        //地址信息
        addressInfo(address,message){
            let that = this;
            if(address.nation === null || address.nation === ''){
                that.addressForm.nation = message;
            }else {
                that.addressForm.nation = address.nation;
            }
            if(address.province === null || address.province === ''){
                that.addressForm.province = message;
            }else {
                that.addressForm.province = address.province;
            }
            if(address.city === null || address.city === ''){
                that.addressForm.city = message;
            }else {
                that.addressForm.city = address.city;
            }
            if(address.district === null || address.district === ''){
                that.addressForm.district = message;
            }else {
                that.addressForm.district = address.district;
            }
            if(address.street === null || address.street === ''){
                that.addressForm.street = message;
            }else {
                that.addressForm.street = address.street;
            }
            if(address.streetNumber === null || address.streetNumber === ''){
                that.addressForm.streetNumber = message;
            }else {
                that.addressForm.streetNumber = address.streetNumber;
            }
        },
        //获取地址详情
        getDetailedAddress() {
            this.loading = true;
            if (this.position) {
                this.$jsonp(`https://apis.map.qq.com/ws/geocoder/v1/`, {
                    location: `${this.position.latitude},${this.position.longitude}`,
                    key: 'IFFBZ-L2DWU-PNXVJ-GROWV-NJYZ2-IIFLU',
                    output: 'jsonp',
                    get_poi: 1,
                    callback: 'myCustomCallback', // 添加自定义回调名
                }, 'myCustomCallback').then((response) => {
                    if (response.status === 0) {
                        this.address = response.result;
                        let addressComponent = response.result.address_component;
                        let message = '暂无信息';
                        if (addressComponent.nation === null || addressComponent.nation === ''){
                            this.addressDetail.nation = message;
                        }else {
                            this.addressDetail.nation = addressComponent.nation;
                        }
                        if (addressComponent.province === null || addressComponent.province === ''){
                            this.addressDetail.province = message;
                        }else {
                            this.addressDetail.province = addressComponent.province;
                        }
                        if (addressComponent.city === null || addressComponent.city === ''){
                            this.addressDetail.city = message;
                        }else {
                            this.addressDetail.city = addressComponent.city;
                        }
                        if (addressComponent.district === null || addressComponent.district === ''){
                            this.addressDetail.district = message;
                        }else {
                            this.addressDetail.district = addressComponent.district;
                        }
                        if (addressComponent.street === null || addressComponent.street === ''){
                            this.addressDetail.street = message;
                        }else {
                            this.addressDetail.street = addressComponent.street;
                        }
                        if (addressComponent.street_number === null || addressComponent.street_number === ''){
                            this.addressDetail.streetNumber = message;
                        }else {
                            this.addressDetail.streetNumber = addressComponent.street_number;
                        }
                        setTimeout(() => {
                            this.loading = false;
                            this.isPosition = true;
                        }, 10000);
                    } else {
                        console.error("获取地址信息失败:", response);
                    }
                }).catch((error) => {
                    console.error("请求失败:", error);
                });
                window.myCustomCallback = function(data) {
                    // 处理数据
                    console.log(data);
                };
            }
        },
        //重置当前位置
        resetForm(){
            if(this.addressDetail.nation === ''
                ||this.addressDetail.province === ''
                ||this.addressDetail.city === ''
                ||this.addressDetail.district === ''
                ||this.addressDetail.street === ''
                ||this.addressDetail.streetNumber === ''){
                this.$message.error('请先定位');
            }else {
                this.$confirm ('确定提交吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http('/attendance/resetPosition','PUT',this.addressDetail,(resp)=>{
                        let data = resp.data;
                        if(data.code === 20000){
                            this.getAddress();
                        }
                    })
                    this.addressDetail.nation = '';
                    this.addressDetail.province = '';
                    this.addressDetail.city = '';
                    this.addressDetail.district = '';
                    this.addressDetail.street = '';
                    this.addressDetail.streetNumber = '';
                    this.isPosition = false;
                }).catch(() => {
                    this.$message.info('已取消重置');
                });
            }

        }
    }
}
</script>

<style>

</style>